<template>
	<view class="page">

		<!-- 切换登录方式 -->
		<view class="title-box">
			<view class="title-first"><text class="title-first-text">登 录</text></view>
			<!-- <view class="title-second"><text class="title-second-text">让 旧 物 焕 发 新 的 生 机</text></view> -->
		</view>
		<view class="account">
			<view class="section">
				<input class="phone" type="number" 
				:maxlength="11" 
				v-model="phoneNum" 
				placeholder="请输入手机号"
					placeholder-class="p-active" />
			</view>
			<view class="section">
				<input class="pwd" type="number" 
				:maxlength="6" v-model="yzm"
				 placeholder="请输入短信验证码"
					placeholder-class="p-active" />
				<text class="btns" type="default" @tap="getCode"
					:class="{ isColor: disable != true }">{{ count }}{{ btnMsg }}</text>
			</view>

		</view>
		<!-- 登录方式 -->
		<view class="privacy-box">
			<view class="img-privacy">

				<image src="../../../static/icon/my_module/login/select.png" style="width: 25upx;height: 25upx;">
				</image>
			</view>
			<view class="name-privacy">
				<view><text class="name-privacy-text">登录即代表阅读并同意</text></view>
				<view><text style="text-decoration: underline;" @click="jump_privacy"
						class="name-privacy-text">《用户协议与隐私政策》</text></view>
			</view>
		</view>
		<!-- 	<view class="chang">
			<view><text class="btn btn-gradient" @click="sendCode">登录</text></view>
		</view> -->
		<view class="btn-box">
			<view class="btn-login" @click="sendCode"><text class="btn-login-text">登录</text></view>
			<view class="btn-weixin">
				<view>
					<image :src="btnImgSrc" mode="aspectFit" style="width: 80rpx;height: 80rpx;"></image>
				</view>
				<view><text class="btn-weixin-text" @click="weixinLo">微信登录</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import statusBar from '@/components/statusBar';
	// import navigate from '@/components/navigate';
	// import {
	// 	mapState,
	// 	mapMutations
	// } from 'vuex';
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				btnImgSrc: "../../../static/icon/my_module/login/weixin.png",
				phoneNum: '',
				yzm: '',
				password: '',
				btnMsg: '',
				statusBarHeight: 0,
				isShow: true,
				disable: true,
				count: '获取验证码',
				timer: null,
				providerList: [],
				userInfo: {},
				serverurl: "",
				show: false,
				type: '',
				privacy: false,
				pushmessage: {
					"type": "pushmessage",
					"toopenid": "88823e4c-6c3e-11ea-b779-fdb4d4144657",
					"message": "您已认证成功！",
					"time": "1585999577",
					"noreadnumber": 0
				},
				pushmessageForNo: {
					"type": "pushmessage",
					"toopenid": "88823e4c-6c3e-11ea-b779-fdb4d4144657",
					"message": "认证失败！",
					"time": "1585999577",
					"noreadnumber": 0
				},
				oldcer: 0,
				show: false,
				type: '',

			};
		},
		onLoad() {
			//把当前日期变成时间戳
			var time = (new Date()).getTime();
			time = time + '0';
			time = time.substring(0, 10);
			this.pushmessage.time = time; //离线时认证消息推送
			this.serverurl = getApp().globalData.serverUrl;
			console.log(getApp().globalData)
			// #ifdef APP-PLUS
			// 获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// #endif
			var userInfo = this.getGlobalUser("globalUser");
			var usertoken = uni.getStorageSync("usertoken");
			var flag = usertoken ? true : false;
			if (flag) {
				this.sendToken();
			}
		},
		methods: {
			jump() {
				uni.switchTab({
					url: '../../news/index'

				})
			},
			jump_privacy() { //跳转到用户协议
				uni.navigateTo({
					url: "../set/privacy/privacy"
				})
			},
			getAddress(openid){
				console.log(openid)
				let me=this;
				var usertoken = uni.getStorageSync("usertoken");
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						uni.request({
							url: me.serverurl + "/user/submitAddress",
							data: {
								"longitude": res.longitude,
								"latitude":res.latitude,
								"openid":openid
							},
							header: {
								"usertoken": usertoken
							},
							method: "POST",
							success(result) {
								console.log(result)
							
							},
							fail: () => {
								uni.showToast({
									duration: 800,
									title: "获取验证码失败"
								})
							}
						})
				    }
				});
			},
			weixinLo() {
				// uni.navigateTo({
				// 	url:'../bind/bind'
				// })
				// return ;
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes)
						uni.request({
							url: that.serverurl + "/user/we_chat/login",
							data: {
								"authResult":loginRes.authResult
							},
							method: "POST",
							success(result) {
						
								if (result.data.status == 200) {
									console.log(result)
									uni.setStorageSync("healthInfo", result.data.healthinfo);
									uni.setStorageSync("accountInfo", result.data.accountinfo);
									uni.setStorageSync("usertoken", result.data.token);
									uni.setStorageSync("connectBlue",false);
									uni.setStorageSync("sendBlue",false);
									that.getAddress(result.data.accountinfo.openid);
									uni.switchTab({
										url: '../../news/index'
									})
									uni.showToast({
										duration: 800,
										title: "登录成功"
									})
									// me.sendCode();
								}else if(result.data.status == 1){
									uni.navigateTo({
										url:'../bind/bind?openid='+ loginRes.authResult.openid
									})
								}
							},
							fail: () => {
								uni.showToast({
									duration: 800,
									title: "获取验证码失败"
								})
							}
						})
					}
				});
			},
			Code() {
				if (this.phoneNum.lengsth < 11) {
					uni.showToast({
						title: "请输入有效手机号"
					})
					return;
				}
				var me = this;

				//获取验证码
				uni.request({
					url: me.serverurl + "/user/getyzm",
					data: {
						"phone": me.phoneNum
					},
					method: "POST",
					success(result) {

						if (result.data.status == 200) {
							uni.showToast({
								duration: 800,
								title: "发送验证码成功"
							})
							// me.sendCode();
						}
					},
					fail: () => {
						uni.showToast({
							duration: 800,
							title: "获取验证码失败"
						})
					}
				})
			},
			sendCode() { //发送验证码验证并登录
				var me = this;
				//获取验证码
				var loginInfo = {};
				loginInfo.phoneNumber = me.phoneNum;
				loginInfo.yzmNumber = me.yzm;
				uni.showLoading({
					title: "验证登录中"
				});
				uni.request({
					url: me.serverurl + "/user/tele/login",
					data: {
						"phone": me.phoneNum,
						"yzm": me.yzm
					},
					method: "POST",
					success(result) {
						
						if (result.data.status == 200) {

							console.log(result.data);
							
							uni.setStorageSync("healthInfo", result.data.healthinfo);
							uni.setStorageSync("accountInfo", result.data.accountinfo);
							uni.setStorageSync("usertoken", result.data.token);
							uni.setStorageSync("connectBlue",false);
							uni.setStorageSync("sendBlue",false);
							me.getAddress(result.data.accountinfo.openid);
							uni.switchTab({
								url: '../../news/index'
							})
							uni.showToast({
								duration: 800,
								title: "登录成功"
							})

						} else if (result.data.status == 401) {
							uni.hideLoading();
							uni.showToast({
								duration: 800,
								icon: "none",
								title: "token已过期,请重新登录"
							})
						} else {
							uni.hideLoading();
							uni.showToast({
								duration: 800,
								image: "../../static/images/fabu/error.png",
								title: "登录失败"
							})
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							duration: 800,
							image: "../../static/images/fabu/error.png",
							title: "登录失败"
						})
					}
				})
			},
			getGlobalUser() { //nvue无法加载main.js函数
				var userInfo = uni.getStorageSync("globalUser");
				if (userInfo != null && userInfo != "" && userInfo != undefined) {
					return userInfo;
				} else {
					return null;
				}
			},
			// 登录方式切换
			loginChange() {
				this.isShow = !this.isShow;
			},
			// 账号登录获取验证码
			getCode() {
				if (this.phoneNum.length < 11) {
					uni.showToast({
						title: "手机号无效！",
						image: "../../static/images/fabu/error.png"
					})
					return;
				}
				this.btnMsg = 's重发';
				this.disable = false;
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							clearInterval(this.timer);
							this.timer = null;
							this.disable = true;
							this.count = '重新获取';
							this.btnMsg = '';
						}
					}, 1000);
					this.Code();
					this.showToast('发送成功', 'success');
				}
			},
			sendToken() { //发送token并登录
				var me = this;
				//获取验证码
				var loginInfo = {};
				var usertoken = uni.getStorageSync("usertoken");
				uni.showLoading({
					title: "验证登录中"
				});
				uni.request({
					url: me.serverurl + "/user/token/login",
					data: {},
					header: {
						"usertoken": usertoken
					},
					method: "POST",
					success(result) {
						// console.log(result.data)
						if (result.data.status == 200) {
							
							
							uni.setStorageSync("healthInfo", result.data.healthinfo);
							uni.setStorageSync("accountInfo", result.data.accountinfo);
							uni.setStorageSync("usertoken", result.data.token);
							uni.setStorageSync("connectBlue",false);
							uni.setStorageSync("sendBlue",false);
							me.getAddress(result.data.accountinfo.openid);
							uni.switchTab({
								url: '../../news/index'
							})
							uni.showToast({
								duration: 800,
								title: "登录成功"
							})


						} else if (result.data.status == 401) {
							uni.hideLoading();
							uni.showToast({
								title: 'token已过期,请重新登录',
								icon: 'none'
							})
						} else {
							uni.hideLoading();
							uni.showToast({
								duration: 800,
								image: "../../static/images/fabu/error.png",
								title: "登录失败"
							})
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							duration: 800,
							title: "登录失败"
						})
					}
				})
			},
			// 消息弹框
			showToast(title, icon) {
				uni.showToast({
					title: String(title),
					icon: String(icon)
				});
			}
		}
	};
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	@font-face {
		font-family: 'webfont';
		font-display: swap;
		src: url('https://at.alicdn.com/t/webfont_1xt8ch0ci5h.woff2') format('woff2');
	}
	
	.title-box {
		margin-top: 100upx;
		width: 20%;
		flex-direction: column;
		align-items: center;
	}
	
	.title-first {
		width: 600upx;
		height: 100upx;
	}
	
	.title-first-text {
		text-align: center;
		font-family: 'webfont';
		font-size: 30px;
	/* 	color: #818cff; */
	}
	
	.title-second {
		width: 600upx;
		height: 100upx;
	
	}
	
	.title-second-text {
		text-align: center;
		font-family: 'webfont';
		font-size: 20px;
		color: #818cff;
	}
	
	.cs {
		position: absolute;
		width: 80upx;
		height: 90upx;
	}
	
	.describe {
		width: 750upx;
		padding: 0 48upx;
		align-items: flex-start;
		margin-top: 36upx;
	}
	
	.it {
		font-size: 28upx;
		color: #9b9b9b;
		margin-top: 12upx;
	}
	
	.msg {
		font-size: 40upx;
		color: #212121;
	}
	
	.account {
		width: 20%;
		margin-top: 24upx;
		/* margin-left: 30%; */
		/* display: flex; */
		align-items: center;
	}
	
	.section {
		position: relative;
		width: 100%;
		height: 130upx;
		flex-direction: row;
		align-items: center;
		border-bottom-color: #dddddd;
		border-bottom-width: 1upx;
	}
	
	.phone,
	.pwd {
		width: 520upx;
		height: 130upx;
		font-size: 30upx;
		color: #181818;
	}
	
	.btns {
		line-height: 50upx;
		font-size: 28upx;
		color: #888888;
		border-width: 0upx;
		background-color: rgba(0, 0, 0, 0);
		color: #007AFF;
	}
	
	.isColor {
		color: #409eff;
	}
	
	.agreement {
		width: 750upx;
		margin-top: 38upx;
		padding: 0 48upx;
	}
	
	.agree-head {
		align-items: center;
		font-size: 26upx;
		color: #cccccc;
	}
	
	.agree-content {
		flex-direction: row;
		align-items: center;
		font-size: 26upx;
		color: #cccccc;
		margin-top: 24upx;
	}
	
	.navigate {
		padding: 10upx 0;
		color: #cccccc;
		font-size: 26upx;
		text-decoration: underline;
	}
	
	.chang {
		width: 750upx;
		height: 100upx;
		background-color: #007AFF;
		margin-top: 136upx;
		padding: 0 48upx;
	}
	
	.box {
		width: 664upx;
		margin-top: 42upx;
	}
	
	.box-one,
	.box-two {
		width: 664upx;
		height: 60upx;
	}
	
	.one {
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		font-size: 26upx;
		color: #333333;
	}
	
	.box-two {
		padding: 0 90upx;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	
	.two {
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		font-size: 26upx;
		color: #333333;
		align-items: center;
	}
	
	.line {
		width: 1upx;
		height: 50upx;
		background-color: #cccccc;
	}
	
	.menu {
		position: fixed;
		bottom: 90upx;
		width: 750upx;
		padding: 0 70upx;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	
	.list {
		width: 70upx;
		height: 70upx;
	}
	
	.icon {
		width: 70upx;
		height: 70upx;
	}
	
	.privacy-box {
		width: 750upx;
		/* 	height: 100upx; */
		text-align: center;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 50upx;
	}
	
	.img-privacy {
		align-items: center;
		justify-content: center;
		width: 30upx;
		height: 30upx;
	}
	
	.name-privacy {
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.name-privacy-text {
		color: gray;
		font-size: 12px;
	}
	
	.btn-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		/* justify-content: flex-start; */
		width:750rpx;
		height: 400rpx;
		/* background-color: #007AFF; */
	}
	.btn-login{
		width: 600rpx;
		height: 120rpx;
		border-radius: 30% 30%;
		text-align: center;
		line-height: 120rpx;
		background-color: #FC6E7B;
	}
	.btn-login-text{
		text-align: center;
		line-height: 120rpx;
		font-size: 25px;
		color: #FFFFFF;
	}
	.btn-weixin{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 600rpx;
		height: 120rpx;
		border-radius: 30% 30%;
		background-color: #98D020;
	}
	.btn-weixin-text{
		text-align: center;
		line-height: 120rpx;
		padding-left: 20rpx;
		font-size: 25px;
		color: #FFFFFF;
	}
	
</style>
